<form class="schedule-form task-create" [formGroup]="form" name="form"
      *ngIf="schedule$ | async as schedule; else loading" (submit)="submit(schedule)">
  <div class="heading">
    <div class="description">
      <h1>Create schedule(s)</h1>
      <p>
        Create a schedule for a task, simply provide a <strong>name</strong> and a <strong>CRON expression</strong>.
        <br>Optionally, you can add <strong>properties</strong> and <strong>arguments</strong>.
      </p>
    </div>
  </div>
  <hr>
  <div>
    <h2>Setup the schedule</h2>
    <div *ngIf="schedule.taskDefinitions.length == 1">
      <div class="row" style="margin-bottom: 12px">
        <div class="col-xs-4">
          <label>Task Name:</label>
        </div>
        <div class="col-xs-20">
          <a style="cursor: pointer" (click)="detailsTask(schedule.taskDefinitions[0])">
            {{ schedule.taskDefinitions[0] }}</a>
        </div>
      </div>
      <div class="row form-group" [class.has-error]="form.get('names').controls[0].invalid">
        <div class="col-xs-4">
          <label class="control-label" for="name">Schedule name:</label>
        </div>
        <div class="col-xs-20">
          <div formArrayName="names">
            <input id="name" name="name" [formControl]="form.get('names').controls[0]" class="form-control input-sm"/>
            <div class="errors-name" *ngIf="form.get('names.0').invalid">
              <div *ngIf="form.get('names.0').errors?.required" class="help-block">The name is required.</div>
              <div *ngIf="form.get('names.0').errors?.exist" class="help-block">The name already exists.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="schedule.taskDefinitions.length > 1">
      <div class="row form-group">
        <div class="col-xs-4">
          <label class="control-label">Tasks:</label>
        </div>
        <div class="col-xs-20">
          <div class="alert alert-danger" style="max-width: 700px" *ngIf="form.get('names').errors?.notUnique">
            Duplicate schedule name on the form.
          </div>
          <table class="table table-form table-form-stripped" style="max-width: 700px">
            <thead>
            <tr>
              <th style="padding-top: 4px" width="50%">Task</th>
              <th style="padding-top: 4px" width="50%">Schedule name</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of schedule.taskDefinitions; index as i">
              <td class="td-label"><a style="cursor: pointer" (click)="detailsTask(item)">{{ item }}</a></td>
              <td>
                <div [class.has-error]="form.get('names.' + i).invalid">
                  <input [formControl]="form.get('names').controls[i]" type="text" class="form-control input-sm"/>
                  <div *ngIf="form.get('names.' + i).invalid">
                    <div *ngIf="form.get('names.' + i).errors?.required" class="help-block">The name is required.</div>
                    <div *ngIf="form.get('names.' + i).errors?.exist" class="help-block">The name already exists.</div>
                  </div>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row form-group" [class.has-error]="form.get('cron').invalid">
      <div class="col-xs-4">
        <label class="control-label" for="cron">Cron Expression:</label>
      </div>
      <div class="col-xs-20">
        <div style="max-width: 260px">
          <input id="cron" name="cron" formControlName="cron" class="form-control input-sm"/>
          <div class="errors-cron" *ngIf="form.get('cron').invalid">
            <span class="help-block" *ngIf="form.get('cron').errors?.required">The cron expression is required.</span>
            <span class="help-block" *ngIf="form.get('cron').errors?.formatError">The cron expression is not valid.</span>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <h2>Task Arguments and Properties</h2>
    <div class="builder">
      <div class="row">
        <div class="col-md-12">
          <div class="col-1-layout" formArrayName="args">
            <h3>Task Arguments</h3>
            <p>You can add optional task arguments before launching the task.</p>
            <table class="table table-actions table-form">
              <thead>
              <tr>
                <th>Key</th>
                <th>Value</th>
                <th>&nbsp;</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let f of form.get('args').controls;let i = index"
                  [formGroupName]="i">
                <td>
                  <div [class.has-error]="form.get('args.' + i).invalid">
                    <input formControlName="key" type="text" class="form-control input-sm"/>
                    <div *ngIf="form.get('args.' + i + '.key').invalid"
                         class="help-block">Invalid key
                    </div>
                    <div *ngIf="form.get('args.' + i).invalid" class="help-block">
                      Invalid key
                    </div>
                  </div>
                </td>
                <td>
                  <div [class.has-error]="form.get('args.' + i).invalid">
                    <input formControlName="val" type="text" class="form-control input-sm"/>
                    <div *ngIf="form.get('args.' + i + '.val').invalid"
                         class="help-block">Invalid value
                    </div>
                  </div>
                </td>
                <td class="table-actions" width="10px" nowrap="">
                  <div class="actions" role="group">
                    <button [disabled]="form.get('args').controls.length == (i+1)" type="button" class="btn btn-danger"
                            (click)="form.get('args').removeAt(i)">
                      <span class="glyphicon glyphicon-remove"></span>
                    </button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-md-12">
          <div class="col-2-layout" formArrayName="params">
            <h3>Task Properties</h3>
            <p>You can add optional task properties before launching the task.</p>
            <table class="table table-actions table-form">
              <thead>
              <tr>
                <th>Key</th>
                <th>Value</th>
                <th>&nbsp;</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let f of form.get('params').controls;let i = index"
                  [formGroupName]="i">
                <td>
                  <div [class.has-error]="form.get('params.' + i).invalid">
                    <input formControlName="key" type="text" class="form-control input-sm"/>
                    <div *ngIf="form.get('params.' + i + '.key').invalid" class="help-block">Invalid key</div>
                    <div *ngIf="form.get('params.' + i).invalid" class="help-block">Invalid key</div>
                  </div>
                </td>
                <td>
                  <div [class.has-error]="form.get('params.' + i).invalid">
                    <input formControlName="val" type="text" class="form-control input-sm"/>
                    <div *ngIf="form.get('params.' + i + '.val').invalid" class="help-block">Invalid value</div>
                  </div>
                </td>
                <td class="table-actions" width="10px" nowrap="">
                  <div class="actions" role="group">
                    <button [disabled]="form.get('params').controls.length == (i + 1)" type="button"
                            class="btn btn-danger" (click)="form.get('params').removeAt(i)">
                      <span class="glyphicon glyphicon-remove"></span>
                    </button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="footer-actions">
    <button (click)="cancel()" type="button" class="btn btn-default">Cancel</button>
    <button id="btn-submit" [disabled]="form.invalid" type="submit" class="btn btn-primary">Schedule the task</button>
  </div>
</form>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
